<template>
	<view class="login_box">
		<view class="text_login">
			<!-- logo -->
			<image class="login_logo"  src="../../static/logo/orange.png" alt="" />
			
			<!-- 表单区域 -->
			<view class="login_phone">
				<text>手机号</text>
				<input type="text"  maxlength="11" v-model="userPhone" />
			</view>
			<view class="login_code">
				<text>验证码</text>
				<input type="text"  maxlength="4" v-model="userCode" />
				<view hover-class="touchOpacity" @click="getSms">{{sendStr}}</view>
			</view>
			
			<!-- 登录按钮 -->
			<view class="login_but" hover-class="touchOpacity" @click="login">
				<text space="ensp">登    录</text> 
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				userPhone:"",//用户的手机号码
				userCode:"",//用户输入的验证码
				sendStr:"获取验证码",//发送文字
				buffer:true,//发送短信开关
			}
		},
		methods: {
			// 短信登录
			login(){
				// 1.获取手机号 和 验证码 缓存中的验证码信息
				let phone = this.userPhone;
				let code = this.userCode;
				let {value,time} = uni.getStorageSync('code')
				
				// 2.校验数据格式
				if( !/^1[3456789]\d{9}/.test(phone)){
					this.$tool.tip('手机号格式有误！');return;
				}
				
				if(new Date().getTime() - time >1000000000000){
					this.$tool.tip('验证码已经过期');return;
				}
				
				if(code != value){
					this.$tool.tip('验证码输入有误！');return;
				}
				
				// 3.执行登录
				this.$http({
					url:"smslogin",
					method:"post",
					data:{phone}
				})
				.then(res=>{
					// 将用户登录成功后的信息存储到本地
					uni.setStorageSync('userInfo',res.list)
					uni.setStorageSync('token',res.list.token)
					// 提示用户登录成功
					this.$tool.tip('登录成功','success')
					// 跳转到个人中心
					uni.switchTab({
						url:"../user/user"
					})
				})
				.catch(err=>console.log(err))
			},
			// 获取短信验证码
			getSms(){
				if(this.buffer){
					// 1.获取手机号码
					let  phone = this.userPhone;
					
					// 2.验证格式  长度：11 test():bool 
					if( !/^1[3456789]\d{9}/.test(phone)){
						this.$tool.tip('手机号格式有误！');return;
					}
					
					// 3.执行发送
					this.$http({
						url:"sms",
						data:{phone}
					})
					.then(res=>{
						// 关闭发送开关
						this.buffer = false;
						// 将返回的手机号验证码缓存  后期做登录校验（值是否正确 是否过期）
						uni.setStorageSync('code',{value:res.list.code,time:new Date().getTime()})
						
						// 倒计时
						let n = 10;
						let t = setInterval(()=>{
							this.sendStr = `${n}s发送`;
							n--;
							if(n<0){
								this.sendStr = "获取验证码";
								clearInterval(t)
								n=10;
								this.buffer = true;
							}
						},1000)
					})
					.catch(err=>console.log(err))
				}else{
					this.$tool.tip('稍后发送！')
				}
			}
		}
}
</script>

<style>
	/* 引入样式 */
	@import url("@/static/css/textlogin.css");
</style>
